<template>
    <div>
        <el-row style="min-width:150px">
            <el-switch v-model="state.strictMode" class="mb-2" :active-value="true" :inactive-value="false" active-text="全选"
                inactive-text="单选" inline-prompt />
            <el-tooltip class="box-item box-item1" effect="dark" content="新增部门" placement="top-start" v-if="props.showEdit">
                <el-button link size="default" type="primary" @click="createOrg()" class="create-btn">
                    <el-icon>
                        <ele-Plus />
                    </el-icon>
                </el-button>
            </el-tooltip>
        </el-row>
        <el-tree :data="props.treeData" :props="props.treeProps" show-checkbox :highlight-current="true"
            :node-key="props.treeProps?.code" @check="selectedNodeKeys" :check-strictly="!state.strictMode" border
             :expand-on-click-node="false">
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                    <span>{{ node.label }}</span>

                </span>
            </template>
        </el-tree>
    </div>
    <dia-log ref="dialogRef"></dia-log>
</template>

<script setup lang="ts" name="index">
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref, inject } from 'vue';
import diaLog from './dialog.vue';
import { usePersonOrgDeleteApi } from '/@/api/person/org';

// 接受父组件传值
const props = defineProps({
    treeData: {
        type: Array,
        default: () => []
    },
    treeProps: {
        type: Object,
        dafault: () => ({
            key: 'code',
            label: 'label',
            code: 0,
            notDel: 0,
            children: 'children'
        })
    },
    showEdit: {
        type: Boolean,
        default: () => true
    }
})

// 接收父组件传递的方法
const getTreeMenus: any = inject('getTreeMenus')

// 传递方法给父组件
const emits = defineEmits(['selectedCode'])

// 定义变量内容
const dialogRef = ref<RefType>()
const state = reactive({
    strictMode: false,
    expandAll: true,
})

// 选择列表更新数据
const selectedNodeKeys = (_checkedNodes: any, checkedKeys: { code: string, checkedNodes: any[] }, _halfCheckedNodes: any, _halfCheckedKeys: any) => {
    const arrResult = [] as string[]
    checkedKeys?.checkedNodes?.forEach((element: { code: string; }) => {
        arrResult.push(element.code)
    });
    emits('selectedCode', arrResult)
}

// 创建新部门
const createOrg = (row?: any, parentRow?: any) => {
    dialogRef.value.openDialog(row, parentRow)
}

// 删除部门
const deleteOrg = (param: any) => {
    ElMessageBox.confirm(
        '是否删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '返回',
            type: 'warning',
        }
    ).then(() => {
        usePersonOrgDeleteApi(param.code).then((res) => {
            ElMessage.success('删除成功')
            getTreeMenus()
        })
    })
}

// 修改部门
const editOrg = (row: any) => {
    dialogRef.value.openDialog(row)
}
</script>

<style scoped lang="scss">
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.create-btn {
    margin-left: 10px;
}
</style>


